<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS定位示例</title>
  <style>
    .container {
      margin: 20px;
      padding: 30px;
      border: 2px dashed #ccc;

    }

    .xianduibox {
      border: 1px solid red;
      width: 100px;
      height: 100px;
      position: relative;
    }

 

    .abs-box {
      width: 100px;
      height: 100px;
      position: absolute;
      border: 1px solid blue;
    }
  </style>
</head>

<body>

  <h2>粘性定位</h2>
  <p>粘性定位position: sticky;可以使元素固定在顶部或底部，当页面滚动时，元素会依照你设置的top或bottom等属性，
    固定在顶部或底部，不会随页面滚动而滚动。</p>
    <div style="border: 1px solid rgb(20, 247, 39); width: 100px; height: 100px; position: sticky; top: 150px;left: 200px; font-size: 8px;">
      粘性定位，这个父元素是body，所以他是固定在顶部的，不会随页面滚动而滚动
    </div>
  <div style="height: 1000px;">
    <div style="background-color: #e2e487;width: 100px; height: 100px; position: sticky; top: 100px;">
      粘性定位,这个是在父元素的范围内，不会随页面滚动而滚动
    </div>
  </div>
  

  <h2>相对定位</h2>
  <p>相对定位是指相对于元素的当前（原来）位置进行定位，通过top、bottom、left、right属性来设置元素的位置。
    相对属性position: relative;是加在要定位的元素上的，为此元素相对父元素的没有做定位移动时的位置，进行的移动。</p>
  <ul>
    相对定位的三个特点：
    <li>开启相对定位，不脱离文档流。</li>
    <li>相对定位是指相对于元素的当前（原来）位置进行定位，而且不释放原来的位置。</li>
    <li>相对定位层级会变化，如果出现层叠，定位元素在上面可以覆盖其他元素。</li>

  </ul>
  <div class="container">
    <div class="xianduibox" style="  left: 20%;">
      相对定位,left: 20%;
    </div>
    <hr>
    <div class="xianduibox" style="  left: 20px;">
      相对定位,left: 20px
    </div>
    <hr>
    <div class="xianduibox" style=" top: 30%; left: 20%;">
      相对定位,left: 20% top: 30%
    </div>
    <hr>
    <span>第三个div元素中的top: 30%;没有生效的原因是因为它没有足够的高度信息来确定30%的偏移量。相对定位元素的偏移是基于其包含块的高度，
      而在这个例子中，包含块（.container）的高度并没有被显式地设置，因此top: 30%;无法正确计算偏移量。
      相比之下，left属性之所以生效，是因为它相对于包含块的宽度进行计算，而宽度通常是容易确定的，即使没有显式设置宽度，浏览器也能根据内容宽度计算出容器的宽度。
      所以left: 20%可以正确计算偏移量。
      为了让top: 30%;生效，你需要确保包含块（.container）有一个明确的高度。例如，你可以给.container设置一个固定的高度，比如height: 200px;这样top: 30%;就可以生效了。</span>
    <hr>
    <div class="xianduibox" style=" left: 30%;top: 60px; ">
      相对定位,他是可以出去到父元素的外面的
    </div>
    <hr>
    <div class="xianduibox" style="  left: 20px;">
      相对定位,left: 20px
    </div>
  </div>

  <h2>绝对定位</h2>
  <p>绝对定位是指相对于开启了定位的父元素进行定位，所以他会脱离文档流，不占据原来的位置，所以如果父元素没有高置高度，
    只有百分比，他不会被撑开，当父元素没有开启定位，他会<span>一层一层</span>往上寻找开启定位的父元素，如果一直没有找到，他就相对浏览器窗口进行定位，
    然后计算尺寸是开启绝对定位的元素的顶点位置开始的。</p>
  <div class="container">
    <div class="container" style="position: relative;  border: 2px dashed #079ecc;">
      <div class="abs-box" style="background-color: #e08e8e; top: 20%; right: 50px; font-size: 10px;;">
        绝对定位，这里用的top: 20%，可以注释第三个div，可以看出，他是计算的 父元素的高度的百分比，padding。
      </div>
      <hr>
      <div class="abs-box" style="width: 80px;height: 80px; background-color: #78bb99; top: 100px; right: 20px; ">
        绝对定位2
      </div>
      <div style="width: 100px; height: 100px; background-color: #8ec6e0; top: 50px; right: 50px;">
        未定位，可以撑起父元素，同时可以看出上面两个元素，没有占位置</div>
    </div>
    <hr>

    <div class="container" style="position: relative;  border: 2px dashed #07cccc;">

      <hr>
      <div class="abs-box"
        style="width: 200px;height: 200px; background-color: #78bb99; top: 30px; left: 50%;font-size: 8px; ">
        绝对定位,这里可以注释掉一下，此盒子父元素的position: relative;观察这个盒子的位置变化，当注释了父元素的position: relative;
        这个盒子就相对浏览器窗口进行定位了，top: 30px;就是距浏览器30，跑上面去了。一般，绝对定位的元素，父元素设置成relative;
        如果父元素不需要位移，可以只设置position: relative;不设置top，left等属性，这样对这个元素没有任何影响，而父元素如果不设置即position: static;，那么这个子盒子就相对浏览器窗口进行定位了。
      </div>

      <hr>
    </div>
  </div>
  <h2 style="margin-top: 200px;">相对定位和绝对定位的区别</h2>
  <p>开启相对定位position: relative;后，这个盒子，无任何变化，设置top，left等后，可以见移动。添加绝对定位position: absolute;
    后，这个盒子脱离文档流，父元素缩小，第三个盒子顶上来。
  </p>
  <div class="container">
    <div style="width: 100px; height: 100px; background-color: #97d9f8; position: relative;">
      相对定位可以撑起父元素，</div>
    <div style="width: 100px; height: 100px; border: 3px solid #77cc07;"><!--可以添加看一下position: relative; -->
      绝对定位，开启absolute后,他会脱离文档流，不占据原来的位置,父元素缩小，下面盒子顶上来</div>
    <div style="width: 80px; height: 80px; background-color: #16a140; top: 50px; right: 50px;">
      未定位，top right不生效</div>
  </div>

  <h2>固定定位</h2>
  <div class="container">
<p>这个盒子不在这里面，在右下角固定，不随页面滚动而滚动，可以用position: fixed;bottom: 10px;right: 10px;来设置。
  这个很简单，就是固定在页面的某个位置，不随页面滚动而滚动。
</p>
  <div style="border: 1px solid purple; width: 100px; height: 100px; position: fixed; bottom: 10px; right: 10px;">
    固定定位
  </div>
</div>

  

  
  <h2>静态定位</h2>
  <p>静态定位就是没有这些定位，默认的定位方式，如果没有设置position属性或者设置position: static;，就是静态定位。left: 200px; top: 100px;不生效</p>
  <div class="container">
    <div style="border: 1px solid black; width: 100px; height: 100px; position: static; left: 200px; top: 100px;">
      静态定位
    </div>
  </div>

</body>

</html>